<template>
  <view class="main-box">
    <view class="containerBody">
      <u-loading-page style="z-index:999;" :loading="showLoading" bg-color="#e8e8e8" loading-text="loading..."></u-loading-page>

      <view class="my-date">
        <view class="my-date-input" @click="change">
          <view style="margin:0 20rpx 0 30rpx">{{ valueTime }}</view>
          <u-image
            width="40rpx"
            height="40rpx"
            src="../../../static/images/dateTime.png"
          ></u-image>
        </view>
 
      </view>
      <!--  -->
      <view class="u-page__item">
        
        <view class="box" v-if="viewList.length>0">
          <view v-for="(viewItem, index) in viewList" :key="index" >
            <view class="my-title-box">
              <view class="my-title-item-box">
                <view style="display: flex; align-items: center;padding-top: 20rpx;">
                  <image style="width:20rpx;height:20rpx"
                    :src="
                      viewItem.checked
                        ? '../../../static/images/yuan_a.png'
                        : '../../../static/images/yuan_aa.png'
                    "
                  ></image>
                  <text class="title" style="margin-left: 20rpx;color:#1a1a1a">
                    {{ viewItem.leaderName }}
                  </text>
                </view>
              </view>
              <view style="display:flex;justify-content: space-around;width: 122px;">
                  <view style="margin-top:13rpx;background:#CB2824" class="callape-btn" @click="deleteNotice(viewItem)">
                      删除
                  </view>
                  <!-- 一个按钮的名称， -->
                  <view style="margin-top:13rpx" class="callape-btn" @click="showClick(viewItem, index)">
                      {{ viewItem.btnName }}
                  </view>
              </view>
           </view>
           
           <view style="margin:10rpx 38rpx 0 38rpx;display:flex;justify-content:space-around;justify-content: space-between;
    padding: 5rpx 0 20rpx 33rpx;color:#606c81;border-bottom: 1rpx solid #d6dfec;">
                   <view style="font-size:24rpx;width:220rpx">
                    {{ viewItem.positionName }}
                   </view>
                   <view style="font-size:24rpx; margin-left: 80rpx">
                    {{  changeTime(viewItem.createTime) }} 
                   </view>
           </view>
               <!-- 确认弹框 -->
              <u-modal :show="pupOwnShow" width="690rpx" :showConfirmButton="false">
                <cmpDialog
                  @handleClose="handleOwnClose()"
                  @submitForm="submitOwnForm"
                  :dialogData="dialogOwnData"
                />
              </u-modal>
             <!-- 内容区 -->
            <view
              class="details" 
              :class="viewItem.checked && 'u-page__item_daily'"
              v-show="viewItem.checked"  >
              <view class="my-uni-form">
                <view>
                  <input
                    v-model="viewItem.content1"
                    class="uni-input"
                    placeholder="工作一最多输入120个字"
                    placeholder-style="color:#DBDBDB;"
                    maxlength="120"
                    type="text"
                  />
              
                  <cmpVideo
                   
                    :imgAttrs="{ width: '160rpx', height: '160rpx' }"
                    :fileList="viewItem.file1"
                    @changeComponentData="changeComponentData"
                  />
                </view>
                <view>
                  <input
                    v-model="viewItem.content2"
                    class="uni-input"
                    placeholder-style="color:#DBDBDB;"
                    placeholder="工作二最多输入120个字"
                    maxlength="120"
                    type="text"
                  />
             
                  <cmpVideo
                   
                    :imgAttrs="{ width: '160rpx', height: '160rpx' }"
                    :fileList="viewItem.file2"
                    @changeComponentData="changeComponent1Data"
                  />
                </view>
                <view style="margin-bottom: 140rpx">
                  <input
                    v-model="viewItem.content3"
                    placeholder-style="color:#DBDBDB;"
                    class="uni-input"
                    placeholder="工作三最多输入120个字"
                    maxlength="120"
                    type="text"
                  />
              
                  <cmpVideo            
                    :imgAttrs="{ width: '160rpx', height: '160rpx' }"
                    :fileList="viewItem.file3"
                    @changeComponentData="changeComponent2Data"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
        <image  v-else
         style="margin-top:100rpx"  
          width="100%"
          height="520rpx"
          src="../../../static/images/nodata.png"
        ></image>
      </view>
   
      <u-datetime-picker
        :show="timeShow"
        @cancel="timeCancel"
        @confirm="timeConfirm"
        v-model="value1"
        mode="date"
      ></u-datetime-picker>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
 
  </view>
</template>
<script>
import uImage from '../../../uview-ui/components/u--image/u--image.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import cmpDialog from '../../../components/cmp-dialog.vue'
import cmpVideo from '../../../components/cmp-video.vue'
import {setEditDaily,getdepartmentList,viewDailyListFun,deleteById} from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  components: { uImage, cmpTabBar, cmpDialog, cmpVideo },
  data() {
    return {
      showLoading:false, //loading加载页
      index: 0,
      departmentName: '',
      currentIndex: null,
      valueTime: moment(new Date()).format('YYYY-MM-DD'),
      timeShow: false,
      selectShow: false,
      currentData: '',
      form: {},
      selectUserObj: {},//选择器选出来的部门
    //  columns: [[]],
      selectValue: '',
      value: '',
      value1: moment(new Date()).format('YYYY-MM-DD'),
      pupOwnShow: false,
      dialogOwnData: {
        title: '是否对编辑内容进行保存？',
        src: '../../../static/images/submint.png',
        btn: {
          ok: '保存',
          close: '暂不',
        },
      },
     // userList: [],
      viewList: [], // 保存消息列表
      fileList: [],
      fileList1: [],
      fileList2: [],
    }
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  onLoad(option) {},
  watch: {
    $route: {
      handler() {
           this.getData({
            createDate: moment(new Date()).format('YYYY-MM-DD'),
          })
      },
      immediate: true,
    },
  },
  onShow() {
    uni.hideTabBar({
      animation: false,
    })
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  methods: {
    deleteNotice(val){
      console.log(val);
      
      wx.showModal({
        title: '提示',
        content: '确定删除'+val.leaderName+'的日报吗？',
        success: (res)=> {
          if (res.confirm) {
            deleteById(val.id).then(()=>{
               this.getData({ createDate: this.valueTime, })
            })
          } 
        }
      })
    },
    //删除末尾的标点
    deleteEndPunctuation(str){
       for(let i=1;i<str.length;i++){
          let lastIndex=  str.charAt(str.length-i) 
          let flag =  lastIndex.replace(/(.*)(，|。|、|！|；|,|;|!)/g ,"") 
            if(flag){       
            return  str.slice(0,str.length-i+1)   
            }
        }
      },
     bindPickerChange(e) {
      //this.index = e.target.value   暂时都不用部分区分
      //this.selectUserObj = this.userList[e.target.value]
      this.getData({
      //  departmentId: this.selectUserObj.departmentId,
        createDate: this.valueTime,
      })
    },
    changeComponentData(data) {
      this.viewList[this.currentIndex].file1 = data
    },
    changeComponent1Data(data) {
      this.viewList[this.currentIndex].file2 = data
    },
    changeComponent2Data(data) {
      this.viewList[this.currentIndex].file3 = data
    },
    getData(item) { //item一个部门id，一个时间
     this.showLoading=true
      this.fileList = []
      this.fileList1 = []
      this.fileList2 = []
      this.viewList = []
       setTimeout(() => {
        this.showLoading=false
      }, 600); 
       viewDailyListFun(item).then((res) => {
        if (res.code === 200 && res.data.length>0) {
          const newArr = res.data        
          newArr.forEach((item) => {
            this.viewList.push({
              btnName: '展开',
              positionName:item.positionName,
              leaderName: item.leaderName,
              checked: false,
              leaderid: item.leaderid,
              clerkid: item.clerkid,
              id: item.id,
              userName: item.userName,
              createTime: item.createTime,
              content1:  item.content1 || item.remark,
              content2: item.content2,
              content3: item.content3,
          
              file1: this.setImgData(item.file1),
              file2: this.setImgData(item.file2),
              file3: this.setImgData(item.file3),
            })
          })
        }
        
      }) 
      
      
    },
    
    changeTime(timeData) {
      return moment(timeData).format('H:mm:ss ');
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
    handleOwnClose() {
        //this.viewList[this.currentIndex].btnName = '收回'
        this.pupOwnShow = false
         this.viewList[this.currentIndex].checked = false
        this.viewList[this.currentIndex].btnName = '展开'
      //  this.pupOwnShow = false
        this.currentIndex = null
       // this.showClick()
    },
    setImgData(fileData) {
      let newfileList = []
      if (fileData) {
        if (fileData.indexOf(';', 1) == 1) {
          if (fileData.indexOf('mp4') === -1) {
            newfileList = [
              {
                key: Math.random(),
                fileType: 'png',
                fileUrl: fileData,
              },
            ]
          } else {
            newfileList = [
              {
                key: Math.random(),
                fileType: 'mp4',
                fileUrl: fileData,
              },
            ]
          }
        } else {
          const strArr = fileData
            .substring(0, fileData.lastIndexOf(';'))
            .split(';')
          strArr.forEach((info, index) => {
            newfileList.push({
              key: Math.random(),
              fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
              fileUrl: info,
            })
          })
        }
        return newfileList
      }
    },
    //提交保存
    submitOwnForm() {
      this.form = {};
      this.viewList[this.currentIndex].btnName = '收回'
      this.form.file1 = ''
      this.form.file2 = ''
      this.form.file3 = ''
      this.form.content1 = this.viewList[this.currentIndex].content1
      this.form.content2 = this.viewList[this.currentIndex].content2
      this.form.content3 = this.viewList[this.currentIndex].content3
       //去掉文本输入最后一个标点符号
       if(this.form.content1){
          this.form.content1 = this.deleteEndPunctuation(this.form.content1)
       }
      if(this.form.content2){
         this.form.content2 =this.deleteEndPunctuation(this.form.content2)
       }
      if(this.form.content3){
          this.form.content3 =this.deleteEndPunctuation(this.form.content3)
       }
  
      this.form.updateBy = this.userInfo.userId
      this.form.leaderid = this.viewList[this.currentIndex].leaderid
      this.form.clerkid = this.viewList[this.currentIndex].clerkid
      this.form.createBy = this.viewList[this.currentIndex].leaderid
      this.form.createTime =this.viewList[this.currentIndex].createTime
      if(this.viewList[this.currentIndex].id) 
       {
         this.form.id = this.viewList[this.currentIndex].id  
       }
       else{
         this.form.status =0
       }


      if (
        this.viewList[this.currentIndex].file1 &&
        this.viewList[this.currentIndex].file1.length > 0
      ) {
        this.viewList[this.currentIndex].file1.forEach((item) => {
          this.form.file1 += item.fileUrl + ';'
        })
      }
      if (
        this.viewList[this.currentIndex].file2 &&
        this.viewList[this.currentIndex].file2.length > 0
      ) {
        this.viewList[this.currentIndex].file2.forEach((item) => {
          this.form.file2 += item.fileUrl + ';'
        })
      }
      if (
        this.viewList[this.currentIndex].file3 &&
        this.viewList[this.currentIndex].file3.length > 0
      ) {
        this.viewList[this.currentIndex].file3.forEach((item) => {
          this.form.file3 += item.fileUrl + ';'
        })
      }
      if(this.form.id){
       setEditDaily(this.form)
        .then((res) => {
        
          uni.showToast({
            title: '保存成功',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 1000,
          })
          this.pupOwnShow = false
        })
        .catch(() => {
          uni.showToast({
            title: '服务异常，请稍后重试',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          this.pupDocumentShow = false
        }) }
     else{
         setEditDaily(this.form)
          .then((res) => {
              
              uni.showToast({
                title: '保存成功',
                type: 'default',
                position: 'bottom',
                icon: 'none',
                position: 'center',
                mask: true,
                duration: 1000,
              })
             this.pupOwnShow = false
            })
        .catch(() => {
          uni.showToast({
            title: '服务异常，请稍后重试',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          this.pupDocumentShow = false
        }) 
       }
   },
    timeCancel() {
      this.timeShow = false
    },
    timeConfirm(e) {
      this.valueTime = this.changeTimeDate(e.value)
      this.timeShow = false
      this.getData({
      //  departmentId: this.selectUserObj.departmentId,
        createDate: this.valueTime,
      })
    },
    change() {
      this.timeShow = true
    },
    handleOtherSelectClose() {
      this.selectShow = false
    },
/*     handleOtherSelectSubmit(e) {
      this.selectShow = false
      this.selectValue = e.value[0].label
      this.selectUserObj = {
        label: e.value[0].label,
        id: e.value[0].id,
      }
      this.getData({
        status: 0,
        createDate: this.changeTimeDate(e.value[0]),
      })
    }, */
    handleSelect() {
      this.selectShow = true
    },
    hideClick(index, checked) {
      this.viewList[index].checked === true ?  this.viewList[index].checked = false : this.viewList[index].checked = true;
    },
    okClick(index, checked) { 
      this.currentIndex = index
      this.pupOwnShow = true
    },
    //按钮操作逻辑
    showClick(item, index) {
      if (this.viewList[index].btnName === '保存') {
        this.currentIndex = index
        this.pupOwnShow = true
      }
      if (this.viewList[index].btnName === '收回') {
        this.viewList[index].checked = false
        this.viewList[index].btnName = '展开'
      //  this.pupOwnShow = false
        this.currentIndex = null
        return false
      }
      if (this.viewList[index].btnName === '展开') {
        item.checked = true
       
      }
      this.viewList[index].btnName = '保存'
      this.currentIndex = index
      this.viewList.forEach((item, index) => {
        if (this.currentIndex === index) {
          this.viewList[index].checked = true
        } else {
          this.viewList[index].btnName = '展开'
          this.viewList[index].checked = false
        }
      })
    
    },

  },
}
</script>

<style lang="scss" scoped>

.u-page__item {
  padding: 0  !important;
  box-sizing: border-box;
}
.u-page__item__title__slot-title {
  height: 80rpx;
  line-height: 80rpx;
}
.u-page__item_daily {
  background: #EAECF4;
  box-shadow: 0px 2rpx 8rpx 0px #d0d6df;
  border-radius: 1rpx;
  padding: 2rpx 20rpx 12rpx;
}
.view_img {
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  .view_img_item {
    margin: 10rpx 4px 0rpx 4rpx;
  }
}
.message_icon {
  width: 20rpx;
  height: 20rpx;
  background: #2b4fa3;
  border-radius: 50%;
  display: inline-block;
  margin-right: 22rpx;
}
.u-page {
  padding: 0;

  &__item {
    padding: 0 30rpx;
    &__title {
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;
      &__slot-title {
        font-size: 14px;
      }
    }
  }
}
.imgDetails {
  display: flex;
  flex-wrap: wrap;
}
.u-collapse-content {
  color: $u-tips-color;
  font-size: 14px;
}
.my-date {
  display: flex;
  align-items: center;
  position: relative;
  height: 90rpx;
  background: #05163E;
  box-shadow: 0px 3rpx 2rpx 0px hsl(219, 100%, 89%);
  border-radius: 10rpx 10rpx 0px 0px;
  justify-content: space-between;
  .my-date-select {
    text-align: end;
    margin-right: 30rpx;
    display: flex;
    color: #fff;
    // color: #c7dbff !important;
  }
  .userSelectEnd {
    display: flex;
  }
}
.title {
  font-size: 30rpx;
  color: #606c81;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 100%;
  .my-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;  
	  padding: 10rpx 30rpx 0 30rpx;
    box-sizing: border-box;
  }
  .my-title-item-box {
    font-weight: bold;
    color: #606c81;
    align-items: center;
    .sub-title {
      margin-top: 6rpx;
      margin-left: 56rpx;
    }
  }
  .textDetails {
    margin: 20rpx 0rpx 32rpx 0rpx;
    height: 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    line-height: 30rpx;
  }
}
.topImg {
  width: 100%;
}
.containerBody {
  position: relative;
  flex: 1;
  margin: 0rpx 32rpx 160rpx 32rpx;
  box-sizing: border-box;
  border: 1rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
  padding-bottom: 90rpx;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: -6rpx;
  width: 100%;
}
.uni-input{
	background-color: white;
	width: auto;
}
</style>

<!-- 韩敏  此页面修改样式 -->